<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es"> 
    <head>
        <title>Flako Comic Reader</title>
        <style type='text/css'>
            body{
                max-height: 100%; 
                text-align: center;
            }

            p#FCRcomic_dialogo_id {
                /*font-family: arial 10pt;*/
                font-family: arial, "DejaVu Sans";
                font-size: 8pt;
                font-weight: bold;
                background-color: #ffffff;
                position: absolute;
                padding: 3px;
                text-align: center;
            }
            img {
                margin: auto;
            }
        </style>
        <script type='text/javascript' src='./ComicReader/mootools-1.3.js'></script>
        <script type='text/javascript' src='./ComicReader/tools.js'></script>
        <script type='text/javascript' src='./ComicReader/Comic.js'></script>
        <script type='text/javascript' src='./ComicReader/Pagina.js'></script>

        <!-- <script type='text/javascript' src='Vairoleto/Vairoleto.js'></script> -->
        <script type='text/javascript'>
            var tmp_path = location.href.substring(location.href.indexOf('?')+1, location.href.lastIndexOf('/'));
            document.write('<script type="text/javascript" src="' + tmp_path + "/" + tmp_path + ".js\"></script\>");
        </script>

        <script type='text/javascript'>
            window.addEvent('domready', function(e)
            {
                //alert(location.href.substring(location.href.indexOf('#') + 1))
                var curr_page = $('current_page');
                var tmp_path = location.href.substring(location.href.indexOf('?') + 1);
                var partes = tmp_path.split(":");
                var para_a_la_pagina = (partes.length == 2? undefined:partes[1]);

                curr_page.set('src', partes[0] + '.' + (partes.length == 2?partes[1]:partes[2]));

                var comic = new Comic('current_page');

                var medio_pantalla = ($(document.body).getSize().x/2);
                var AREA_ACCION = 100; // cantidad de pixeles para ir anterior o siguiente
                
                var in_original_size = false;

                $('current_page').addEvent('click', function(e)
                {
                    var aux = comic.position().x;
                    if(e.client.x - aux > comic.size().x - AREA_ACCION){
                        if(para_a_la_pagina === undefined || comic.current_page < para_a_la_pagina){
                            comic.nextPage();
                            in_original_size = false;
                        }
                    }else if(e.client.x - aux < AREA_ACCION){
                        comic.previousPage();
                        in_original_size = false;
                    }else{
                        if(!in_original_size){
                            in_original_size = true;
                            comic.originalSize();
                            $(document.body).scrollTo(e.client.x, e.client.y);
                        }else{
                            in_original_size = false;
                            comic.adjust();
                        }
                    }
                });
                        
                $('siguiente').addEvent('click', function(e)
                {
                    comic.nextPage();
                });

                $('anterior').addEvent('click', function(e)
                {
                    comic.previousPage();
                });

                $('tamanio_original').addEvent('click', function(e) {
                    comic.originalSize();
                });

                Function.attempt(function(){
                    initialize(comic);
                });

                comic.open();
            });
        </script>
    </head>

    <body>
        <!--<p id='parrafo'></p>-->
        <p><a id='anterior'>&lt;&lt;</a><a id='tamanio_original'>|º|</a><a id='siguiente'>&gt;&gt;</a></p>
        <div id='container'>
            <img src='#' alt='Una imagen' id='current_page' />
        </div>
    </body>
</html>

